<script setup lang="ts">
import { ref, toRefs } from "vue";

let sysInfo = uni.getSystemInfoSync();
let statusBarHeight = ref(sysInfo.statusBarHeight);
let props = defineProps(["color", "title"]);
let { color, title } = toRefs(props);
</script>
<template>
  <div class="section-box">
    <div
      class="status-bar"
      :style="{
        height: statusBarHeight + 'px',
      }"
    ></div>
    <div class="nav-bar">
      <div class="left">
        <slot name="left"></slot>
      </div>
      <div
        :style="{
          color,
        }"
      >
        {{ title || "" }}
      </div>
      <div class="right">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.nav-bar {
  height: 44px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 34rpx;
  .left {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
  }
}
</style>
